<template>
	<view class="content">
		<view class="logo">
			<image class="image" src="@/static/images/common/logo.png"></image>
		</view>
		
		<!-- 按钮组 -->
		<view class="btn-group">
			<button class="btn wx" type="primary" open-type="getUserInfo" @tap="wxLogin()">微信授权</button>
			<button class="btn browse" type="default" @tap="onBack()">随便看看</button>
			
			<!-- 隐私政策 -->
			<view class="policy-rules">
				授权即表明您确认并同意
				<text class="text" @tap="toPolicy()">《用户协议》和《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				options: {},
				btnLock: false
			}
		},
		onLoad(options) {
			
			this.options = options;
			console.log(options)
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_weixinsq');
			// #endif
		},
		methods: {
			// 微信授权登录
			wxLogin() {
				let that = this;
				if (!this.btnLock) {
					this.btnLock = true;
					
					uni.showLoading({
						title: '登录中...'
					})
					
					let params = {};
					
					uni.login({
						provider: 'weixin',
						success(loginRes) {
							params.code = loginRes.code;
						
							uni.getUserInfo({
								provider: 'weixin',
								success(userRes) {
									params.iv = userRes.iv;
									params.encryptedData = userRes.encryptedData;
									that.$service.common.sign.wxLogin(params).then(async (authRes) => {
										await that.$store.dispatch('token', { token: authRes.token });
										await that.$store.dispatch('getUserInfo');
										
										that.btnLock = false;
										uni.hideLoading();

										// #ifdef MP-WEIXIN
										uni.reportAnalytics('click_weixinsq_cg');
										// #endif
										
										if (that.options.redirectUrl) {
											if (that.options.redirectUrl === '/pages/group/auto' || that.options.redirectUrl === '/pages/member/center') {
												uni.switchTab({
													url: that.options.redirectUrl
												})
											} else {
												if (that.options.redirectUrl === 'navigateBack') {
													uni.navigateBack({
														delta: 1
													});
												} else if (that.options.redirectUrl === 'reLaunch') {
													uni.reLaunch({
													    url: '/pages/index/index'
													});
												} else {
													uni.navigateTo({
														url: that.options.redirectUrl
													})
												}
											}
										} else {
											uni.switchTab({
												url: '/pages/index/index'
											})
										}
									}).catch((err) => {
										that.btnLock = false;
										uni.hideLoading();
										uni.showToast({
											title: err.message,
											icon: 'none'
										})
										// #ifdef MP-WEIXIN
										uni.reportAnalytics('click_weixinsq_sb');
										// #endif
									})
								},
								fail: function(err) {
									that.btnLock = false;
									uni.hideLoading();
									// #ifdef MP-WEIXIN
									uni.reportAnalytics('click_weixinsq_sb');
									// #endif
								}
							});
						},
						fail: function(err) {
							that.btnLock = false;
							uni.hideLoading();
							// #ifdef MP-WEIXIN
							uni.reportAnalytics('click_weixinsq_sb');
							// #endif
						}
					});
				}
			},
			// 随便看看
			onBack() {
				uni.navigateBack({
				    delta: 1
				});
				
				// #ifdef MP-WEIXIN
				uni.reportAnalytics('click_suibiankk_botton');
				// #endif
			},
			// 跳转至隐私政策
			toPolicy() {
				uni.navigateTo({
					url: '/pages/index/webView?url=https://pt.xmonecode.com/group_policy.html'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background: #fff;
		@include flexBox(space-around, center, column);
		.logo {
			// margin: 150rpx 0;
			text-align: center;
			box-sizing: border-box;
			font-size: 40rpx;
			@include flexBox(center, center, column);
			.image {
				background: #EAEAEA;
				width: 350rpx;
				height: 350rpx;
				border-radius: 50%;
				margin-bottom: 20rpx;
			}
		}
		.btn-group {
			// width: 340rpx;
			
			.btn {
				width: 340rpx;
				line-height: 92rpx;
				border-radius: 50rpx;
				font-size: 32rpx;
				margin-bottom: 40rpx;
				font-weight: 600;
				&.wx {
					color: #333;
					background: $main-color;
					border: 2rpx solid $main-color;
				}
				&.browse {
					border: 2rpx solid $main-color;
					color: $main-color;
					background: #fff;
				}
				&::after {
					border: none;
				}
			}
			
			.policy-rules {
				margin-top: 60rpx;
				font-size: 24rpx;
				.text {
					color: $main-color-text;
				}
			}
		}
	}
</style>
